<template>
  <div class="card-contain">
    <div class="title-contain">
      <span>
        <span class="title-type">{{ title }}</span>
        <span class="ml10">
          <slot name="titleContent"></slot>
        </span>
      </span>
      <span>
        <extra-text v-if="extraType === 'time'" v-bind="$attrs" v-on="$listeners"></extra-text>
        <extra-drop v-else v-on="$listeners"></extra-drop>
      </span>
    </div>
    <div class="mt20">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import ExtraText from "./ExtraText";
import ExtraDrop from "./ExtraDrop";

export default {
  components: {
    ExtraText,
    ExtraDrop
  },
  name: "ChartCard",
  props: {
    title: String,
    loading: Boolean,
    type: String,
    extraType: {
      type: String,
      default: "time"
    }
  }
};
</script>

<style scoped lang="less">
.card-contain {
  height: 100%;
  border: 1px solid #f0f0f0;
  background: #fff;
  padding: 10px 16px;
  box-shadow: 0px 0px 10px 0px rgba(63, 85, 142, 0.05);
  border-radius: 8px;

  .title-type {
    color: #37393F;
    font-size: 0.18rem;
    font-weight: 600;
  }

  .title-contain {
    display: flex;
    justify-content: space-between;
    height: 30px;
  }
}
</style>
